<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE html>
<html><head>
	<title>Add_tasknotice</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="<%=basePath%>css/application-36b8b4e33314f129f3c42b9740d98890.css" media="all" rel="stylesheet" type="text/css">
	
	<!-- 有关Color Picker的导入 -->
	<link rel="stylesheet" media="screen" type="text/css" href="<%=basePath%>colorpicker/css/colorpicker.css" />
	
	<script src="<%=basePath%>colorpicker/js/jquery.js" async="" type="text/javascript"></script>
	<script src="<%=basePath%>colorpicker/js/eye.js" async="" type="text/javascript"></script>
	<script src="<%=basePath%>colorpicker/js/utils.js" async="" type="text/javascript"></script>
	<script src="<%=basePath%>colorpicker/js/layout.js?ver=1.0.2" async="" type="text/javascript"></script>
	<!-- 有关Color Picker的导入 -->
		
	<script src="<%=basePath%>js/ga.js" async="" type="text/javascript"></script>
	<script src="<%=basePath%>js/application-114d9a8373cd197d7265335db95e1a0a.js" type="text/javascript"></script>

	
	
	<script src="<%=basePath%>colorpicker/js/colorpicker.js" async="" type="text/javascript"></script>

	

	
	
	
	
</head>
<body class="crm">
	
	<div class="container">
		<div class="row">
			<div class="span8 offset2">
				<div class="well screen">
					<div class="page-header header">	
						任务分类
					</div>
					<div class="main">
					<p>修改分类会影响到同事们的任务。比如，如果您将“邮件”改为“LOGO邮件”，所有分类为“邮件”的任务都将改为“LOGO邮件”。 请确认您的修改会通知到所有同事。</p>

					<div class="new">
						<form accept-charset="UTF-8" action="save_notice.action" class="well form-inline"  id="category_form" method="post">
							<input type="hidden" value="settings" name="from">
							<input type="hidden" value="ChanceCategory" name="type">
							
							<input name="taskNotice.type" placeholder="添加一个任务分类..." autocomplete="off">
							<button type="submit" class="btn" disabled="disabled">添加</button>
							
							<img id="indicator" src="${basePath}/img/workxp_sprites.png" style="display:none">
						</form>
					</div>
					

		<table class="table crm-table" id="tasktype">
			<tbody>
			
			<c:forEach items="${taskNoticeList }" var="taskNotice">
			
<tr id="category_29544" >
	
	<td width="20px">
		<span id="category_29544_color" class="selected_color_swatch color_swatch" style="background-color:#${taskNotice.color}"></span>
	</td>
	
	<td style="font-size:14px">
		
		<div class="show">
			${taskNotice.type}
		</div>
		
		<div class="edit" style="display:none">
			<form accept-charset="UTF-8" action="save_edit_notice.action" class="form-inline well" id="edit_category" method="post">
				<input type="hidden" name="taskNotice.id" value="${taskNotice.id }">
				<input autocomplete="off" id="category_name" name="taskNotice.type" class="span2" type="text" value=${taskNotice.type } >
				<input  maxlength="6" size="6" id="colorpickerField1"name="taskNotice.color" class="span2" value="${taskNotice.color}"  >
				<button type="submit" class="btn btn-primary">保存</button>
				<button class="btn cancel">取消</button>
			</form>
		</div>



		<img alt="Indicator" class="spinner" id="operation_wait_29544" src="${basePath}/img/indicator.gif" style="height:5px;width:21px;vertical-align: middle; display: none;">
	</td>
	
	<td class="actions">
		<a href="#" class="icon icon-edit" rel="tooltip" data-original-title="编辑分类名称"><small>编辑</small></a>
		<a href="javascript:;" class="icon icon-trash" id="${taskNotice.id }" onclick="delTaskNotice(this)"  rel="tooltip nofollow" data-original-title="删除这个分类"><small>删除</small></a>
	</td>
</tr>


					
			

					</c:forEach>
						
						</tbody>
					</table>

			<a href="<%=basePath%>/task/task.action" >完成编辑，返回</a>
			
		<script type="text/javascript">
			function delTaskNotice(obj) {
				id = $(obj).attr("id");
				$.get("delete_notice.action",{"taskNotice.id":id},function(){
						$(obj).parent().parent().remove();
				});
			}
		</script>
		
<script type="text/javascript" charset="utf-8">
	
	
	
	function toggleEditForm(tr) {
		tr.find(".edit").toggle();
		tr.find(".show").toggle();
	}
	
	$(document).ready(function() {
		$("#tasktype").click(function(e) {
			var target = $(e.target);
			if(target.is("a[data-id] span")) {
				e.preventDefault();
				setCategoryColor(target.parent().attr("data-id"), target.attr("data-color"));
			} else if(target.parent().is(".menu_target")) {
				e.preventDefault();
				showColorPicker(target.parent().attr("data"));
			}	else if(target.is(".menu_target")) {
				e.preventDefault();
				showColorPicker(target.attr("data"));
			} 
		});
		
		$("#tasktype").on("click", ".icon-edit, button.cancel", function(e) {
			e.preventDefault();
			toggleEditForm($(e.target).parents("tr"));
		});

		
		setInterval(function() {
			var submit = $(".new :submit");
			$.trim($(".new :text").val()) == "" ? submit.attr("disabled", "disabled") : submit.removeAttr("disabled");
		}, 500);
	

		
		/* $('#colorpickerField').ColorPicker({
					onSubmit: function(hsb, hex, rgb, el) {
						$(el).val(hex);
						$(el).ColorPickerHide();
					},
					onBeforeShow: function () {
						$(this).ColorPickerSetColor(this.value);
					}
				})
				.bind('keyup', function(){
					$(this).ColorPickerSetColor(this.value);
				});
		 */
	});
	

	
</script>

<style type="text/css" media="screen">
	a.menu_target:hover{
		text-decoration:none;
	}
	.category-form {
		margin: 0px;
	}
	div.edit_swatch {
		width:85px;
	}
	span.color_swatch {
	  border: 1px solid #CCCCCC;
	  display: inline-block;
	  height: 18px;
	  vertical-align: middle;
	  width: 50px;
	}
	div.edit_swatch a {
	  background: -moz-linear-gradient(center top , #FFFFFF 30%, #EFEFEF 100%) repeat scroll 0 0 transparent;
	  border: 1px solid #999999;
	  padding: 2px 6px 2px 7px;
	}
	div.edit_swatch a {
	  display: block;
	}
	ul.picker {
		list-style: none outside none;
	  background: url(/assets/workxp_sprites.png) no-repeat scroll -402px -574px transparent;
	  margin: -1px 0 0 !important;
	  padding: 10px 0 12px 9px !important;
	  position: absolute;
	  width: 189px;
	  z-index: 99;
	}
	ul.picker li {
	  float: left;
	  margin: 0 8px 8px 0;
	  padding: 0;
	  width: auto;
	}
	ul.picker li a, ul.picker a:hover {
	  border: medium none !important;
	  margin: 0 !important;
	  padding: 0 !important;
	}
	ul.picker li.selected {
	  border: 1px solid #333333;
	  margin: -1px 7px 7px -1px !important;
	}
	div.edit_swatch {
	  border-bottom: 1px solid #CCCCCC;
	  border-right: 1px solid #CCCCCC;
	}
</style>

					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
